<template>
    <div class="headerBox">
        <div class="logo">
            <img @click="toHome" src="../../../assets/image/logo.png" alt="">
        </div>

        <div class="chooseBox">
            <router-link to="/become">BECOME A MODEL</router-link>
            <!-- <router-link to="/instagram">INSTAGRAM</router-link> -->
            <router-link to="/contact">CONTACT</router-link>
        </div>

        <div class="navbar" @click="drawer = true">
            <svg t="1725611662311" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                p-id="5090" width="30" height="30">
                <path
                    d="M898.8 278.4h-746a32 32 0 0 1 0-64h746a32 32 0 0 1 0 64z m0 269.008h-746a32 32 0 0 1 0-64h746a32 32 0 0 1 0 64z m0 268.992h-746a32 32 0 0 1 0-64h746a32 32 0 0 1 0 64z"
                    p-id="5091"></path>
            </svg>
        </div>
    </div>

    <el-drawer v-model="drawer" title="" @click="drawer = false" direction="rtl" size="50%">
        <div class="chooseBox2">
            <router-link to="/become">BECOME A MODEL</router-link>
            <!-- <router-link to="/instagram">INSTAGRAM</router-link> -->
            <router-link to="/contact">CONTACT</router-link>
        </div>
    </el-drawer>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router';

const drawer = ref(false)

const router=useRouter()

const toHome=()=>{
    router.push('/home')
}
</script>

<style lang="scss" scoped>
@media (min-width: 768px) and (max-width: 1280px) {
    
}

@media (max-width: 768px) {
    .headerBox {
        position: relative !important;

        .logo {
            flex: 1;
            height: 100%;
            display: flex;
            // background-color: aqua;
            justify-content: center;
            align-items: center
        }

        .chooseBox {
            display: none;
        }

        .navbar {
            display: block !important;
            bottom: 25px;

        }
    }
}

.headerBox {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    height: 80px;
    align-items: center;
    // background-color: aquamarine;

    img {
        margin-left: 30px;
    }

    .chooseBox {
        margin-right: 30px;
        letter-spacing: 2px;

        a {
            color: #b4b5ba;
            font-family: Montserrat;
            text-decoration: none;
            margin-right: 20px;
        }

        .router-link-active {
            color: black;
        }
    }

    .navbar {
        display: none;
        margin-right: 30px;
        position: absolute;
        right: 0;
    }
}

.chooseBox2 {
    display: flex;
    flex-direction: column;
    letter-spacing: 2px;

    a {
        font-size: 12px;
        color: #b4b5ba;
        font-family: Montserrat;
        text-decoration: none;
        // margin-right: 20px;
        margin-bottom: 20px;
    }

    .router-link-active {
        color: black;
    }
}
</style>